<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>商品详情</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
<style>
body{
  background: #F5F7F8 !important;
}
.shopInfo{
  padding: 0.5rem 0.8rem 0.75rem;
  margin-bottom:0.4rem;
  background: #fff;
}
.shopInfo .title{
  color: #010101;
  height: 2.2rem;
  line-height: 1.1rem;
  font-size: 0.7rem;
}
.ubi{
height: 32px;
line-height: 32px;
color: rgba(231, 52, 80, 1);
font-size: 32px;
text-align: left;
font-weight: bold;

}
.ubi span{
height: 12px;
line-height: 12px;
color: rgba(231, 52, 81, 1);
font-size: 12px;
text-align: left;

}
.shopInfo .jia{
  color: #373336;
  font-size:0.6rem;
  padding-left: 1rem;
  vertical-align: bottom;
}
.shop-detail .tit{
  height: 2.5rem;
  line-height: 2.5rem;
  color: #4A4A4A;
  padding-left: 1rem;
  font-size: 0.6rem;

}
.shop-detail .shop-img img{
  width: 100%;
}
.bg-e7{
  background-color: #E73250 !important;
}
#header{
  position: absolute;
  background-color: transparent;
}
#footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  font-size: 0.7rem !important;
}
</style>
</head>
<body>
  <!-- <header class="aui-bar aui-bar-nav" id="header">
        <div class="aui-pull-left" tapmode onClick="api.closeFrame();"><span class="aui-iconfont aui-icon-left"></span></div>
        <div class="aui-title"></div>
        <div class="aui-pull-right"><img src="../../image/common/06.png" style="height:0.9rem" alt=""></div>
  </header> -->
  <div class="swiper-container mainImg">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../../image/demo/shop.png" width="100%" alt=""></div>
      <div class="swiper-slide"><img src="../../image/demo/shop.png" width="100%" alt=""></div>
      <div class="swiper-slide"><img src="../../image/demo/shop.png" width="100%" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <div class="aui-content">
    <div class="shopInfo">
      <div class="title">欧莱雅护发精油修复干枯防毛躁柔顺头发护理烫后护卷发护发素正品</div>
      <div class="aui-flex-col aui-flex-between aui-flex-bottom aui-padded-t-15">
        <p class="ubi">5<span>积分</span></p>
        <p class="flex-auto jia">价值<s>￥125</s></p>
        <p class="aui-font-size-10 color-666">库存 7629件</p>
      </div>
    </div>
    <div class="shop-detail bg-white">
      <p class="tit">商品详情</p>
      <div class="shop-img"><img src="../../image/demo/shop.png" alt=""></div>
    </div>
  </div>
  <div style="height:2.5rem"></div>
  <footer class="aui-bar aui-bar-tab" id="footer">
            <div class="aui-bar-tab-item aui-border-r" tapmode onclick="openCart()" style="width: 3rem;">
                <div><i class="aui-iconfont aui-icon-cart color-e7"></i><div class="aui-badge bg-e7">4</div></div>
                <div class="aui-bar-tab-label color-333 aui-font-size-12">购物车</div>
            </div>
            <div class="aui-bar-tab-item" tapmode style="width: 3rem;" tapmode onclick="contact()">
                <i class="aui-iconfont aui-icon-comment color-e7"></i>
                <div class="aui-bar-tab-label color-333 aui-font-size-12">客服</div>
            </div>
            <div class="aui-bar-tab-item bg-e7 aui-text-white" tapmode onclick="cartMask()" style="width: auto;line-height:2.5rem">加入购物车</div>
        </footer>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
var topSwiper;
apiready = function() {
	api.parseTapmode();
};
sliderInit();
function sliderInit(){
	topSwiper = new Swiper('.mainImg',{
		speed: 600,
		autoplay: false,
		pagination: {
			el: '.swiper-pagination',
			type: 'fraction'
		},
	});
}

function cartMask(){
	api.openFrame({
		name:'mask_all',
		url:'add_shop_mask.html',
		rect:{
			x:'auto',
			y: 'auto',
			w: 'auto',
			h: 'auto'
		},
		bounces: false,
		pageParam:{
			wname: api.winName,
			fname: api.frameName,
		},
		animation:{
			type: 'fade'
		}
	})
}
// 打开客服
function contact (){
  api.openFrame({
      name: 'contactKeFu',
      url: '../giftBag/contactKeFu.html',
      rect: {
          x: 0,
          y: 0,
          w: 'auto',
          h: 'auto',
      },
      animation: {
        subType:"from_bottom"
      }
  });
}
</script>
</html>
